<template>
  <div id="complaint">
    <div v-if="loading" style="padding: 0.2rem;">
      <p class="text-gray" style=" margin-bottom: 0.2rem;">您遇到的问题?</p>
      <ul class="complaint-list">
        <li @click="handleCheck(index)" class="flex flex-space-between" :class="[item.client == 1? 'active': '']" v-for="(item, index) in tag" :key="index">
          <span>{{ item.text }}
            <span class="text-orange">-{{ item.credit }}分</span>
          </span>
          <i class="icon icon-checkall" v-if="item.client == 1"></i>
        </li>
      </ul>
      <group style="background: #fff;">
        <x-textarea v-model="content" :max="100" placeholder="您还有什么想说的?"></x-textarea>
      </group>
      <div style="margin-top: 0.3rem;">
        <x-button type="primary" :show-loading="loadingBtn" @click.native="subComment" action-type="button">{{btn}}</x-button>
      </div>
    </div>
  </div>
</template>
<script>
  import PubHeader from '../components/PubHeader.vue'
  import { XTextarea } from 'vux'
  export default {
    components: {
      PubHeader,
      XTextarea
    },
    created() {
      const {oid, serviceid, touid} = this.$route.query
      if(!oid || !serviceid || !touid) {
        this.$router.push('/')
        return
      }
      this.$http.post($config.host + '/api/Comment/getTypeList', qs.stringify({
        uid: this.$store.state.userInfo.uid,
        client: $config.client_type,
        device: $config.device_type,
        token: this.$store.state.userInfo.token
      })).then(res => {
        const {code, data, msg} = res.data
        if(code == 1 && data) {
          this.loading = true
          this.tag = data.data
        } else if (code == '3') {
          this.$vux.toast.text($config.loginErrMsg, 'middle')
          this.$router.push({path: '/logout'})
        } else {
          this.$vux.toast.text(msg, 'middle')
        }
      }).catch(err => {
        this.$vux.toast.text($config.errMsg, 'middle')
      })
    },
    data() {
      return {
        tel: $config.publicTel,
        loading: false,
        loadingBtn: false,
        btn: '匿名提交',
        formItem: {
          uid: this.$store.state.userInfo.uid,
          client: $config.client_type,
          device: $config.device_type,
          token: this.$store.state.userInfo.token,
          order_rate: '',
          type_id: '',
          content: '',
          touid: this.$route.query.touid,
          serviceid: this.$route.query.serviceid,
          oid: this.$route.query.oid
        },
        tag: [],
        index: null,
        content: ''
      }
    },
    methods: {
      handleCheck(index) {
        if(this.index !== null && index != this.index) {
          this.tag[this.index].client = 2
        }
        this.tag[index]['client'] = 1
        this.index = index
        this.formItem.type_id = this.tag[index].type
        this.formItem.content = this.tag[index].text
        this.formItem.order_rate = this.tag[index].credit
      },
      subComment() {
        if(!this.formItem.type_id){
          this.$vux.toast.text('请选择投诉内容', 'middle')
          return
        }
        this.sub()
      },
      sub() {
        this.loadingBtn = true
        this.btn = '提交投诉中'
        this.formItem.content = this.content || this.formItem.content
        this.$http.post($config.host + '/api/Comment/addComplain', qs.stringify(this.formItem)).then(res => {
          const {code, msg} = res.data
          if(code == 1) {
            this.$vux.toast.text('投诉成功', 'middle')
            this.$router.go(-2)
          } else if (code == '3') {
            this.$vux.toast.text($config.loginErrMsg, 'middle')
            this.$router.push({path: '/logout'})
          } else {
            this.loadingBtn = false
            this.btn = '重新提交'
            this.$vux.toast.text(msg, 'middle')
          }
        }).catch(err => {
          this.loadingBtn = false
          this.btn = '重新提交'
          this.$vux.toast.text($config.errMsg, 'middle')
        })
      }
    }
  }
</script>
<style scoped>
  .complaint-list li{
    height: 0.8rem;
    line-height: 0.8rem;
    background: #fff;
    margin-bottom: 0.15rem;
    padding: 0rem 0.2rem;
    border:1px solid #FFFFFF;
  }
  .complaint-list li.active{
    border-color: #f3532c;
  }
  .complaint-list .icon{
    color: #f3532c;
  }
  .weui-cell{
    height: inherit !important;
  }
</style>
